{extend name="admin@public/basic" /}

{block name="style"}
<style type="text/css">
    form {
        margin: 10px auto;
        width: 620px
    }

    h1, h2, h3 {
        padding: 10px 0
    }

    a {
        color: #1C86EE;
        text-align: right;
        font-size: 18px
    }

    .xtree_contianer {
        overflow: auto;
        margin-bottom: 30px;
        padding: 10px 0 25px 5px;
        width: 500px;
        border: 1px solid #9C9C9C;
        background-color: #fff
    }

    .div-btns {
        margin: 20px 0
    }

    .layui-form-label {
        width: 60px !important
    }
    /* 分页样式 */
    .page {
        width: 100%;
        text-align: center;
        padding: 15px 0 35px;
    }
    .page a{
        padding: 5px 10px;
        text-align: center;
        background: #fff;
        border: 1px solid #ddd;
        margin-right: 5px;
        color:#333;
        font-size:12px;
    }
    .page a:hover{
        background-color: #ff6600;
        color: #fff;
    }
    .page input {
        text-align: center;
        width: 50px;
        padding:5px 10px;
        background: #fff;
        border: 1px solid #ddd;
        margin: 0 5px;
    }
    .page .current {
        background-color: #ff6600;
        color: #fff;
    }
    .page .toPage{
        margin-right:10px;
    }
    .page .disabled{
        background-color: #dddddd !important;
        cursor: no-drop !important;
        color: #666666 !important;
        border: 1px solid #dddddd !important;
    }
    .page .toPage input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
    }
    .page .toPage input{
        -moz-appearance:textfield;
    }
</style>
{/block}

{block name="cotent"}
<form class="layui-form">
    <!--顶部操作栏--开始-->
    <!--顶部操作栏--结束-->
    <h1>{$auth.title|default=''}</h1>
    <h3>授权酒店：</h3>
    <div id="xtree3" class="xtree_contianer">
        <div class="layui-xtree-item" style="margin: 5px 0px 0px 10px;">
            <i class="layui-icon layui-xtree-icon" data-xtree="0" style="position: relative; top: 3px; margin: 0px 5px 0px 0px; font-size: 18px; color: rgb(47, 64, 86); cursor: pointer;"></i>
            <input type="checkbox" name="nodes" class="layui-xtree-checkbox"  lay-skin="primary" lay-filter="xtreeckxtree3">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
            </div>
        </div>
    </div>
    <div class="page"></div>
    <input type="hidden" id="auth_id" name="auth_id" value="{$auth.id|default=''}">
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" id="submitBtn">提交</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
        </div>
    </div>
</form>
<input type="hidden" name="nodesall" id="nodes" value="{$auth.cm_message_id}">
{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/plugs/layui-xtree2.0/layui-xtree.js"></script>
<script type="text/javascript" src="__STATIC__/js/admin/page/page.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var form = layui.form
        layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
        laypage = layui.laypage;
        getData();
        var checkvalue=$('#nodes').val();
        if(checkvalue){
            var checkvalueArr=checkvalue.split(',')
        }else{
            var checkvalueArr=[];
        }
       $('body').on('click','.layui-form-checkbox',function(){
           var thisIsChecked=$(this).hasClass('layui-form-checked');
           var thisIsValue=$(this).prev('input').val();
           if(thisIsChecked){
            checkvalueArr.push(thisIsValue);
           }else{
               for(var i = 0;i<checkvalueArr.length;i++){
                   if(checkvalueArr[i]==thisIsValue){
                        checkvalueArr.splice(i,1);
                   }
               }
           }
       })
        $("#submitBtn").click(function () {
            // var node_id = [];
            // $('input[name="nodes"]:checked').each(function () {
            //     node_id.push($(this).val());
            // });
            $.request.post("{:url('@admin/setting.account_person/authorizeHotel')}", {
                auth_id: $("#auth_id").val(),
                node_id: checkvalueArr.sort(sortNumber),
            }, function (res) {
                $.msg.success(res.msg, function () {
                    $.tool.reload('open');
                });
            });
           return false;
        });
        $('#currentSearch').click(function(){
            getData();
        });
        function getData(page=1){
            var id=$("#auth_id").val();
            var name=$("#name").val();
            var city=$("#city").val();
            // $.request.get("{:url('@admin/setting.account_person/authorizeHotel')}",{type:1,page,id:id,name:name},function (res){
            $.request.get("{:url('@admin/setting.account_person/authorizeHotel')}",{type:1,page,id:id,search:{name:name,city:city}},function (res){
                if(res.code==0){
                    $.msg.success(res.msg)
                    listDom(res);
                }
            })
        }
        //排序规则
        function sortNumber(a,b){
            return a - b
        }
        function setPage(type,page,id){
            var name=$("#name").val();
            var city=$("#city").val();
            form.render();
            $.request.get("{:url('@admin/setting.account_person/authorizeHotel')}",{type:1,page,id:id,search:{name:name,city:city}},function (res){
                if(res.code==0){
                    $.msg.success(res.msg)
                    listDom(res)
                }
            })
        }
        function listDom(res){
            var id=$("#auth_id").val();
            var str='';
            var totalPages = parseInt(res.data.page_sum);
            var currentPage = parseInt(res.data.page_current);
            if(totalPages > 1){
                var temp = new $('.page').createPage({
                    pageNum : totalPages,
                    current : currentPage,
                    backfun : function(e){
                        setPage(1,e.current,id,name)
                    }
                });
            }else{
                $('.page').html('')
            }
            for(var i in res.data.data){
                var check='';
                if(res.data.data[i].is_checked == true){
                    check = "checked='true'";
                }else{
                    check = '';
                }
                str+='<div class="layui-xtree-item" style="margin: 5px 0px 0px 10px;">' +
                    '            <i class="layui-icon layui-xtree-icon" data-xtree="0" style="position: relative; top: 3px; margin: 0px 5px 0px 0px; font-size: 18px; color: rgb(47, 64, 86); cursor: pointer;"></i>' +
                    '            <input type="checkbox" name="nodes" class="layui-xtree-checkbox" value='+res.data.data[i].id+' title='+res.data.data[i].name+' lay-skin="primary" lay-filter="xtreeckxtree3" '+check+'>' +
                    '            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">' +
                    '            </div>' +
                    '        </div>'
            }
            $('#xtree3').html(str);
            form.render();
        }
        // $('#currentSearch').click(function () {
        //     var searchData = Object();
        //     var searchInput = $('#searchBlock div div input');
        //     searchData['id'] = '{$auth.id}';
        //     $.each(searchInput, function (i, obj) {
        //         id = $(obj).attr('id');
        //         if (id != undefined) {
        //             searchData[id] = $("#" + id).val();
        //         }
        //     });
        //     // 搜索为空数据重载
        //     if(searchData.name == ''){
        //         $.tool.reload();
        //         $.msg.success('查询成功!');
        //         return false;
        //     }
        //     $.request.get("{:url('@admin/setting.account_person/authorizeHotel')}",searchData,function (res){
        //         // 弹出提示
        //         $.msg.success(res.msg, function () {
        //             // $.tool.reload('open');
        //         });
        //         // 数据渲染
        //         var data = res.data;
        //         $('#xtree3').find('div').hide();
        //         var html = '';
        //         var check = '';
        //         Object.keys(data).forEach(function(key){
        //             if(data[key].is_checked == true){
        //                 check = "checked='true'";
        //             }else{
        //                 check = '';
        //             }
        //             html += "<div class='layui-xtree-item' style='margin: 5px 0px 0px 10px;'>" +
        //                 "<i class='layui-icon layui-xtree-icon' data-xtree='0' style='position: relative; top: 3px; margin: 0px 5px 0px 0px; font-size: 18px; color: rgb(47, 64, 86); cursor: pointer;'></i>" +
        //                 "<input type='checkbox' name='nodes' class='layui-xtree-checkbox' "+check+" value='"+data[key].id+"' title='"+data[key].name+"' lay-skin='primary' lay-filter='xtreeckxtree3'>" +
        //                 "<div class='layui-unselect layui-form-checkbox' lay-skin='primary'>" +
        //                 "</div>" +
        //             "</div>";
        //         });
        //         $("#xtree3").append(html);
        //         form.render();
        //     });
        //     return false;
        // });
    });

</script>
{/block}
